<template>
	<fragment>
		<template v-for="menu in menus">
			<el-submenu v-if="menu.children && menu.children.length > 0" :index="menu.id" :key="menu.id">
				<template slot="title">
					<i :class="'el-icon-' + menu.icon" v-if="menu.icon"></i>
					<span slot="title" v-if="menu.label.length <= 10">{{ menu.label }}</span>
					<span slot="title" v-else :title="menu.label">{{ menu.label.substr(0, 10) }}...</span>
				</template>
				<aside-menu-item :menus="menu.children" @toPage="toPage"></aside-menu-item>
			</el-submenu>
			<el-menu-item v-else :index="menu.id" :key="menu.id" @click="toPage(menu)">
				<i :class="'el-icon-' + menu.icon" v-if="menu.icon"></i>
				<span slot="title" v-if="menu.label.length <= 10">{{ menu.label }}</span>
				<span slot="title" v-else :title="menu.label">{{ menu.label.substr(0, 10) }}...</span>
			</el-menu-item>
		</template>
	</fragment>
</template>

<script>
export default {
	name: 'AsideMenuItem',
	props: {
		menus: {
			type: Array,
			default: () => {}
		}
	},
	methods: {
		toPage(obj) {
			this.$emit('toPage', obj);
		}
	}
}
</script>

<style lang="less" scoped>

</style>